<body>
    <h1>Actuliazar funcionario!</h1>
    <br /><br />
    <div id="mytabs">
        <ul id="tablist">
            <li id="tabs-1-tab"><a href="#tabs-1">Actuliazar Funcionarios</a></li>
        </ul>
        <div id="tabs-1">
            <table align="center">
                <tr>
                    <td>
                        Placa
                    </td>
                    <td>
                        <input name="placa_funcionario" id="placa_funcionario"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Cedula
                    </td>								
                    <td>
                        <input name="cedula" id="cedula"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Nombre
                    </td>								
                    <td>
                        <input name="nombre" id="nombre"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Apellido
                    </td>								
                    <td>
                        <input name="apellido" id="apellido"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Sexo
                    </td>								
                    <td>
                        <input name="sexo" id="sexo"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Telefono
                    </td>								
                    <td>
                        <input name="telefono" id="telefono"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Jerarquia
                    </td>								
                    <td>
                        <input name="jerarquia" id="jerarquia"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        Fecha  Nacimiento
                    </td>								
                    <td>
                        <input name="fecha_naci" id="fecha_naci"/>
                    </td>
                </tr>
                <tr>
                    <td>
                        direccion
                    </td>								
                    <td>
                        <input name="direccion" id="direccion"/>
                    </td>
                </tr>
                <tr>
                <td height="30px"></td>
                </tr>
                <tr>
                    <td>
                        <p>
                            <span class="art-button-wrapper">
                                <span class="art-button-l"> </span>
                                <span class="art-button-r"> </span>
                                <a style="cursor: pointer;" class="art-button" href="javascript:guardar()">Guardar</a>
                            </span>
                        </p>
                    </td>
                    <td>
                        <p>
                            <span class="art-button-wrapper">
                                <span class="art-button-l"> </span>
                                <span class="art-button-r"> </span>
                                <a class="art-button" style="cursor: pointer;" href="javascript:limpiar()">Limpiar</a>
                            </span>
                        </p>
                    </td>
                </tr>
            </table>
            <div id="respuesta"></div> 

        </div>
    </div>
    <script>
        
        function cargar(){
            
            
        }
        
        function guardar(){			
            console.log(">>>" + $("#placa_funcionario").get(0).value);
            //Con jquery obtengo los id de cada input que estan en mi pagina html.
            var params = {placa_funcionario: $("#placa_funcionario").get(0).value,
                cedula: $("#cedula").get(0).value,
                nombre: $("#nombre").get(0).value,
                apellido: $("#apellido").get(0).value,
                sexo: $("#sexo").get(0).value,
                telefono: $("#telefono").get(0).value,
                jerarquia: $("#jerarquia").get(0).value,
                fecha_naci: $("#fecha_naci").get(0).value,
                direccion: $("#direccion").get(0).value,
                accion: 'actualizar'
            }			
            $("#respuesta").load("../controladores/FuncionarioControlador.php", params, function(){	                
                console.log("recibidos los datos por ajax");
            });
        }
         $("#fecha_naci" ).datepicker({
            showOn: "button",
            buttonImage: "../images/calendar.gif",
            buttonImageOnly: true,
            changeMonth: true,
            changeYear: true,
            dateFormat: 'yy-mm-dd',
            regional: 'es'
        });
        
        $("#mytabs").tabs();
    </script>  
</body>
